<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>ES6模块化的基础语法-/按需导出与按需导入</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				height: 100%;
				width: 100%;
			}

			#app {
				width: 40rem;
				min-height: 20rem;
				padding: 2rem;
				margin: 2rem auto;
				border: 0.1rem solid black;
				box-shadow: 0.5rem 1rem 1rem 0.5rem gray;
			}

			h2 {
				height: 2.5rem;
				font-size: 1.2rem;
				line-height: 2.5rem;
				text-align: center;
				background-color: black;
				color: white;
			}

			ul {
				list-style-position: inside;
			}

			ul li {
				margin: 1rem 0;
			}

			pre {
				color: #666;
				margin: 1rem 0;
				font-size: 0.9rem;
				border-left: 0.05rem solid black;
			}

			strong {
				color: #f60;
				font-weight: bold;
				margin-right: 2rem;
			}
		</style>
		<style>
			@media (min-width:1000px) {
				html {
					font-size: 20px;
				}
			}

			@media (min-width:500px) and (max-width:1000px) {
				html {
					font-size: 16px;
				}
			}

			@media (max-width:500px) {
				html {
					font-size: 12px;
				}
                body{
					font-size:1.25rem;
				}
				#app {
					width: auto;
					height: auto;
					margin: 0;
				}
				pre{
					font-size:1.1rem;
				}
				h2{
					height:4rem;
					line-height:4rem;
					font-size:1.4rem;
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>ES6模块化的基础语法-/按需导出与按需导入</h2>
			<ul>
				<li><strong>按需导出语法:</strong>export let s1 = 10
					<pre>
    //当前文件模块为m1.js
    //向外按需导出变量s1
    export let s1 = 'aaa'
    //向外按需导向变量s2
    export let s2 = 'bbb'
    //向外按需导出方法say
    export function say = function(){}
				</pre>
				</li>
				<li><strong>按需导入语法:</strong>import {s1} from '模块标识符'
					<pre>
    //导入模块成员
    //s2 as ss2 给s2起别名
    import {s1,s2 as ss2,say} from "./m1.js"
    console.log(s1)//打印出aaa
    console.log(ss2)//打印出bbb
    console.log(say)//打印出[Function:say]
					</pre>


				</li>
			</ul>
		</div>

		<script src="index.js" type="module"></script>
	</body>
</html>
